<template>
  <div class="w-[300px] bg-[#232324] h-[calc(100vh-90px)] flex flex-row">
    <div
      class="flex flex-col items-center w-[65px] h-[100%] select-none cursor-pointer"
    >
      <div
        v-for="item in componentsList.firstList"
        :key="item.id"
        @click="clickFirst(item.id as string)"
        :class="{
          'bg-[#333333]': firstActive == item.id,
          '!text-[#3a89fe]': firstActive == item.id,
        }"
        class="flex flex-col justify-center items-center w-[85%] h-[60px] text-center text-[14px] text-[#d3d0d0] hover:bg-[#333333] mb-[6px]"
      >
        <SvgIcon
          :iconClass="item.icon"
          size="22px"
          :color="firstActive == item.id ? '#3a89fe' : '#fff'"
          class="mb-[4px]"
        ></SvgIcon>
        <span> {{ item.name }}</span>
      </div>
    </div>
    <div
      class="bg-[#1e1e1f] flex flex-col items-center w-[65px] h-[100%] border-r border-r-solid border-r-[#4f4e4e] cursor-pointer select-none"
    >
      <div
        @click="clickAll"
        :class="{
          'bg-[#333333]': secondActive == 'all',
          '!text-[#3a89fe]': secondActive == 'all',
        }"
        class="rounded-lg mb-[5px] w-[85%] h-[35px] text-center leading-[35px] text-[14px] text-[#d3d0d0] hover:bg-[#333333]"
      >
        全部
      </div>
      <div
        v-for="item in componentsList[firstActive + '_List']"
        :key="item.id"
        :class="{
          'bg-[#333333]': secondActive == item.id,
          '!text-[#3a89fe]': secondActive == item.id,
        }"
        class="rounded-lg mb-[5px] w-[85%] h-[35px] text-center leading-[35px] text-[12px] text-[#d3d0d0] hover:bg-[#333333]"
        @click="clickSecond(item.id)"
      >
        {{ item.name }}
      </div>
    </div>

    <Item class="flex-1" :data="passedList" @search="searchComp" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import Item from "./item.vue";
import componentsList from "./componentsList";

let firstActive = ref("charts");
let secondActive = ref("all");
let secondList = ref<any>([]);
let passedList = ref<any>([]);
onMounted(() => {
  secondList.value = componentsList[firstActive.value + "_List"];
  clickAll();
});
const clickFirst = (id: string) => {
  firstActive.value = id;
  secondList.value = componentsList[id + "_List"];
  clickAll();
};

const clickSecond = (id: string) => {
  passedList.value = secondList.value.find(
    (item: any) => item.id == id
  )?.children;
  secondActive.value = id;
};

const clickAll = () => {
  secondActive.value = "all";
  passedList.value = secondList.value.map((it) => it.children).flat();
};

const searchComp = (value: string) => {
  if (!value) {
    clickAll();
    return;
  }
  passedList.value = secondList.value
    .map((it) => it.children)
    .flat()
    .filter((item: any) => item.name.includes(value));
};
</script>

<style scoped lang="scss"></style>
